<template>
	<view>
        <view class="halloween">
            <view class="head">
                <view class="skull">
                    <view class="eyes">
                        <view class="eye eye-left"></view>
                        <view class="eye eye-right"></view>
                    </view>
                </view>
            </view>
            <view class="body"></view>
            <view class="legs"></view>
        </view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {}
	},
	computed: {},
	methods: {},
}
</script>
<style lang="scss" scoped>

$themeColor: #444;  //#70c000 #0081ff #444


*,
:after,
:before {
	box-sizing: border-box;
}

.halloween .head .skull:before,
.halloween .head .skull:after,
.halloween .eyes .eye:before,
.halloween .body:before,
.halloween .body:after,
.halloween .legs:before {
	content: "";
	position: absolute;
}

.halloween {
	position: absolute;
    bottom: 4px;
    right: 65px;
	width: 30px;
	height: 44px;
	animation: move 3s infinite;

	.head {
		z-index: 1;
		width: 25px;
		height: 25px;
		background: $themeColor;
		border-radius: 50%;
		position: relative;
		.skull {
			left: 2px;
			bottom: 2px;
			width: 16px;
			height: 16px;
			color: #f9f9f9;
			border-radius: 50%;
			background: #f9f9f9;
			position: absolute;
			animation: skull 3s infinite;
			&:before {
				top: 9px;
				width: 0;
				left: 50%;
				height: 0;
				z-index: 1;
				margin-left: -2px;
				border: 2px solid transparent;
				border-bottom: 2px solid $themeColor;
			}

			&:after {
				top: 14px;
				left: 50%;
				width: 1px;
				height: 4px;
				margin-left: -1px;
				background: #f9f9f9;
				box-shadow: 2px 0, -2px 0, 4px 0, -4px 0, -3px -2px, -1px -2px, 1px -2px, 3px -2px;
			}
		}
	}
	.eyes {
		width: inherit;
		height: inherit;
		overflow: hidden;
		border-radius: 50%;
		position: relative;
		.eye {
			top: 5px;
			width: 5px;
			height: 5px;
			position: absolute;
			border-radius: 50%;
			background: #f8cd22;
			border: 1px solid $themeColor;
			border-right: 2px solid $themeColor;
			&:before {
				top: -1px;
				left: -1px;
				width: 5px;
				height: 3px;
				background: #f9f9f9;
				border-radius: 5px 5px 0 0;
				animation: eyes 3s infinite;
			}
		}
		.eye-left {
			left: 1px;
		}
		.eye-right {
			right: 1px;
		}
	}

	.body {
		top: -3px;
		width: 24px;
		height: 17px;
		background: $themeColor;
		position: relative;
		border-radius: 10px 10px 2px 2px;
		&::before,
		&::after {
			top: 3px;
			width: 4px;
			height: 12px;
			background: $themeColor;
		}

		&::before {
			left: -1px;
			border-radius: 100% 0 0 2px;
			transform: rotate(10deg);
			animation: hand-left 3s infinite;
		}
		&::after {
			right: -1px;
			border-radius: 0 100% 2px 0;
			transform: rotate(-10deg);
			animation: hand-right 3s infinite;
		}
	}

	.legs {
		top: -3px;
		left: 50%;
		width: 21px;
		height: 10px;
		overflow: hidden;
		margin-left: -13px;
		position: relative;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);

		&:before {
			top: 0;
			left: -7px;
			width: 60px;
			height: 10px;
			background-image: linear-gradient(-495deg, $themeColor 4px, transparent 0), linear-gradient(-45deg, transparent 4px, $themeColor 0);
			background-size: 4px 8px;
			background-repeat: repeat-x;
			animation: legs 3s infinite;
		}
	}
}

@keyframes move {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(15px);
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes skull {
	0% {
		transform: translate(0, 0);
	}

	25% {
		transform: translate(2px, 1px);
	}

	75% {
		transform: translate(3px, -1px);
	}

	100% {
		transform: translate(0, 0);
	}
}

@keyframes eyes {
	0% {
		top: -5px;
		border-radius: 50%;
	}

	50% {
		top: -1px;
		border-radius: 5px 5px 0 0;
	}

	100% {
		top: -5px;
		border-radius: 50%;
	}
}

@keyframes legs {
	0% {
		left: -7px;
	}

	50% {
		left: -25px;
	}

	100% {
		left: -7px;
	}
}

@keyframes hand-left {
	0% {
		left: 1px;
	}

	50% {
		left: -2px;
	}

	100% {
		left: 1px;
	}
}

@keyframes hand-right {
	0% {
		right: 1px;
	}

	50% {
		right: -2px;
	}

	100% {
		right: 1px;
	}
}
</style>
